<template>
  <div class="entirety">
    <div class="content ww">
      <div class="sd">
        <SingerCat />
      </div>
      <div class="mn">
        <SingerCard title="推荐歌手" :dataList="dataList" />
      </div>
    </div>
  </div>
</template>

<script>
import { reqSingerList } from '@/api/index'
import SingerCat from '@/components/SingerCat'
import SingerCard from '@/components/SingerCard'
export default {
  name:'Singer',
  components: { SingerCat, SingerCard },
  data() {
    return {
      dataList: []
    }
  },
  created() {
    reqSingerList().then(res => {
      console.log(res.rows)
      res.rows.forEach(item => {
        let obj = {
          id: item.id,
          name: item.singerName,
          cover: ''
        }
        this.dataList.push(obj)
      })
    })
  }
}
</script>

<style lang="less" scoped>
.entirety{
  .content{
    display: flex;
    .sd{
      padding: 51px 10px 0;
      width: 180px;
      background-color: #F9F9F9;
      border-left: 1px solid rgb(186, 186, 186);
      border-right: 1px solid rgb(186, 186, 186);
      box-sizing: border-box;
    }
    .mn{
      height: 700px;
      flex: 1;
      padding: 40px;
      background-color: #fff;
      box-sizing: border-box;
    }
  }
}
</style>